<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/polyfill.js"></script>
    <title>Document</title>
    <link rel="stylesheet" href="../css/details.css">
</head>
<body>
    <div class="box" id="box">
        <!-- 放小图的盒子 -->
        <div class="show">
            <img 
            src="../images/W020210630346872812411_580.png" 

            alt="">
            <!-- 遮罩层 -->
            <div class="mask"></div>
        </div>
        <div class="list">
            <p class="active">
                <img src="../images/W020210630346873179649_60.png" 
                data-show="../images/W020210630346872812411_580.png"
                data-enlarge="../images/W020210630346872812411.png"
                alt="">
            </p>
            <p>
                <img 
                src="../images/W020210630346873561469_60.png" 
                data-show="../images/W020210630346873561469.png"
                data-enlarge="../images/W020210630346873561469.png"
                alt="">
            </p>
            <p>
                <img 
                src="../images/W020210630346873760913_60.png" 
                data-show="../images/W020210630346873760913.png"
                data-enlarge="../images/W020210630346873760913.png"
                alt="">
            </p>
        </div>
        <!-- 放大镜的盒子 magnifier-->
        <div class="magnifier">
            <img src="../images/W020210630346872812411.png" alt=""></div>
    </div>
    <div class="information">
    </div>
    <script src="../js/utils.js"></script>
    <script src="../js/details.js"></script>
    <script>
         const e = new Enlarge('#box')
        console.log(e)
    </script>
</body>
</html>